// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

import "./styled.scss";

interface Props {
  onUpdateType: (data: 1 | 2) => void;
}

class Index extends Component<Props> {
  state = {
    tabIndex: 0,
  };

  // onTab = (tabIndex: number) => {
  onTab = (tabIndex: 0 | 1) => {
    this.setState({
      // tabIndex: tabIndex
      tabIndex,
    });

    this.props.onUpdateType((tabIndex + 1) as 1 | 2);
  };

  render() {
    const { tabIndex } = this.state;
    return (
      <div className="tabs">
        {/* <div className={`tab ${tabIndex ? "active" : ""}`}>正在热映</div> */}
        <div
          className={`tab ${tabIndex || "active"}`}
          onClick={() => this.onTab(0)}
        >
          正在热映
        </div>
        <div
          className={`tab ${tabIndex && "active"}`}
          onClick={() => this.onTab(1)}
        >
          即将上映
        </div>
        {/* <div className="line" style={{ left: "17.5%" }}></div> */}
        {/* <div className="line" style={{ left: "67.5%" }}></div> */}
        <div
          className="line"
          // style={{ left: tabIndex ? "67.5%" : "17.5%" }}
          style={{ left: ["17.5%", "67.5%"][tabIndex] }}
        ></div>
      </div>
    );
  }
}
export default Index;
